<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <meta charset="utf-8">
  <title>后台管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/layui/css/layui.css"  media="all">
</head>


<body>
<form class="layui-form layui-form-pane" id="form1">
    <input type="hidden" name="gradationId" id="gradationId" lay-verify="title" autocomplete="off"  th:value="${id}"   class="layui-input">
    <div class="layui-row">
        <div class="layui-col-xs4">
            <div class="layui-form-item">
                <label class="layui-form-label">端口号</label>
                <div class="layui-input-block">
                    <input type="text" name="local_port"  id="local_port" lay-verify="title" autocomplete="off"     class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-form-item">
                <label class="layui-form-label">映射域名</label>
                <div class="layui-input-block">
                    <input type="text" name="custom_domains" id="custom_domains" lay-verify="title" autocomplete="off"   class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-col-xs4">
            <div class="layui-form-item">
                <label class="layui-form-label">操作</label>
                <div class="layui-input-block">
                    <button type="button"  class="layui-btn onSave">添加</button>
                </div>
            </div>
        </div>
    </div>
</form>
<!--<div class="search" style="margin-top: 10px">
    层次编码:
    <div class='layui-inline'>
        <input class='layui-input' name='code' id='code' autocomplete='off'>
    </div>
  <button class="layui-btn" data-type="reload">搜索</button>
</div>-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<input type="hidden" th:value="${id}" id="id">
<script src="/layui/layui.all.js" charset="utf-8"></script>
<!-- 发布状态 -->
<script type="text/html" id="switchTpl">
  <input type="checkbox" data-id="{{d.id}}" name="releaseStatus" value="{{d.releaseStatus}}" lay-skin="switch" lay-text="已发布|未发布" lay-filter="sexDemo" {{ d.releaseStatus == 1 ? 'checked' : '' }}>
</script>
<!-- 头部工具栏 -->
<!-- 头部工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加层次</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除层次</button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>
</script>

<script>

    (layui.use(['table', 'jquery'], function () {
        var table = layui.table, form = layui.form, $ = layui.jquery;
        let gradationId = $('#id').val();

        table.render({
            height: 'full-60'
            , elem: '#test'
            , autoSort: false
            , url: '/frp/http/get'
            , method: 'get'
            , height: 600
            , size: 'lg'
            , cols: [
                [
                    {type: 'checkbox'}
                    /* ,{field:'id', title: 'id', sort: true} */
                    , {field: 'local_port', title: '端口号'}
                    , {field: 'custom_domains', title: '映射域名'}
                    , {title: '操作', fixed: 'right', width: 300, align: 'center', toolbar: '#barDemo'}
                ]
            ]
            , limit: 9999
            , page: false
        });

//监听排序事件
        table.on('sort(test)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('test', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

//layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });
//监听工具条
        table.on('tool(test)', function (obj) {
            console.info(obj)
            var data = obj.data;
            if (obj.event === 'provide') {
                $.ajax({
                    type: 'POST',
                    url: '/gradation/update',
                    data: {id: data.id, status: 5},
                    success: function (data) {
                        if (data.code == 0) {
                            location.href = '/gradation/list'
                        } else {
                            layer.alert(data.msg)
                        }
                    }
                })
            } else if (obj.event === 'del') {
                layer.confirm('确定要删除么', function (index) {
                    $.ajax({
                        type: 'POST',
                        url: '/gradationChildren/batchDel',
                        data: {ids: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                obj.del();
                                layer.close(index);
                                table.reload('test', {
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                            } else {
                                layer.alert(data.msg)
                            }
                        }
                    })
                });
            } else if (obj.event === 'edit') {
//layer.alert(JSON.stringify(data));
//layer.alert('编辑行：<br>'+ JSON.stringify(data))
                location.href = "/gradation/add?peopleId=" + $('#peopleId').val();
            } else if (obj.event === 'audit') {

                layer.confirm('是否通过？', {
                    btn: ['通过', '不通过'] //可以无限个按钮
                }, function (index, layero) {

                    $.ajax({
                        type: 'POST',
                        url: '/gradation/agree',
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                location.href = '/gradation/listByPeopleid?id=' + $('#peopleId').val();
                            } else {
                                layer.alert(data.msg)
                            }
                        }
                    })
                }, function (index) {
                    $.ajax({
                        type: 'POST',
                        url: '/gradation/update',
                        data: {id: data.id, status: 4},
                        success: function (data) {
                            if (data.code == 0) {
                                location.href = '/gradation/listByPeopleid?id=' + $('#peopleId').val();
                            } else {
                                layer.alert(data.msg)
                            }
                        }
                    })
                });
            }
        });
        var $ = layui.$, active = {
            reload: function () {
//var demoReload = $('#demoReload');
                var name = $('#name');
//var id=$("#demoReload_ID");
//执行重载
                table.reload('test', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        name: name.val(),
//name: demoReload.val()
//,templet_id:id.val()
                    }
                });
            }
        };

//头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    location.href = '/gradation/add?peopleId=' + $('#peopleId').val();
                    break;
                case 'del':
                    var data = checkStatus.data;
                    var ids = new Array();
                    $.each(data, function (i, n) {
                        ids[i] = n.id;
                    })
                    layer.confirm('确定要删除么', function (index) {
                        $.ajax({
                            type: 'POST',
                            url: '/project/batchDel',
                            data: {ids: ids.join(",")},
                            success: function (data) {
                                if (data.code == 0) {
                                    location.href = '/page/project/list'
                                } else {
                                    layer.alert(data.msg)
                                }
                            }
                        })
                    });
                    break;
            }
            ;
        });
        //编辑、删除按钮点击事件
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('.search .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
//保存、更新按钮
        $(document).on('click','.onSave',function(){
            var form1 = $("#form1").serialize();
            $.ajax({
                type:'POST',
                url:'/gradationChildren/save',
                data:form1,
                success:function(data){
                    if(data.code == 0){
                        $('#length').val('')
                        $('#name').val('')
                        $('#chenineName').val('')
                        table.reload('test', {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        });
                    }else{
                        layer.msg(data.msg)
                    }
                }
            })
        });


    }))

</script>
</body>
</html>